<template>
  <div class="head-category">
    <grid-view :cols="3" :lineSpace="15" :v-margin="20" v-if="headCategory">
      <div class="subcate-item" v-for="item of headCategory" :key="item.acm">
        <a :href="item.link">
          <img :src="item.image" @load="headCateImgLoad" />
          <p>{{ item.title }}</p>
        </a>
      </div>
    </grid-view>
  </div>
</template>

<script>
import GridView from "components/common/gridview/grid-view";
export default {
  name: "headCategory",
  data() {
    return {
      count: 0,
      imgLoadLength: 0
    };
  },
  props: {
    headCategory: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    GridView
  },
  watch: {
    headCategory() {
      this.imgLoadLength = this.headCategory.length;
    }
  },
  methods: {
    headCateImgLoad() {
      if (++this.count === this.imgLoadLength) {
        this.$emit("headCateImgLoad");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.head-category {
  .subcate-item {
    width: 81px;
    a {
      display: block;
      height: 100%;
      width: 100%;
      img {
        padding: 10px;
        width: 100%;
      }
      p {
        font-size: 12px;
        text-align: center;
      }
    }
  }
}
</style>